<template>
	<view class="content">
		<!-- #ifndef H5 -->
		<view class="seatBox" :style="{height:getAppData.customTop+'px','background-color':'#000'}"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="" :style="{height:getAppData.statusBarHeight + 10 +'px'}"></view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="navBar" :style="{'line-height':getAppData.iconHeight+'px'}">
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<view class="navBar">
				<!-- #endif -->
				<view class="back" @tap="back">
					<!-- #ifndef MP-WEIXIN -->
					&lt;
					<!-- #endif -->
					返回
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="title" :style="{'padding-right':getAppData.iconWidth+'px'}">
					设置
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<view class="title">
					设置
				</view>
				<!-- #endif -->
			</view>
			<scroll-view class="" scroll-y="true" :style="{'height':`calc( 100vh - ${getAppData.customTop}px - ${getAppData.iconHeight}px - ${getAppData.getSystemInfoSync.safeAreaInsets.bottom}px - 20rpx - 1rpx)`}">
			<sc<!-- roll-view class="" scroll-y="true" :style="{'height':`calc( ${getAppData.getSystemInfoSync.safeArea.height}px - ${getAppData.iconHeight}px - 20rpx)`}"> -->
				<view class="formBox">
					<view class="formBox-item">
						<view class="formBox-item-label">
							输入敲击文字
						</view>
						<input placeholder="输入敲击文字" :value="formData.title" maxlength="8" @input="titleInput" @blur="titleInputBlur" />
					</view>
					<view class="formBox-item" >
						<view class="formBox-item-label">
							增加还是减少
						</view>
						<view class="uni-list-cell-db">
							<picker @change="bindPickerChange" :value="pickerIndex" range-key="label" :range="dict.addType">
								<view class="uni-input">{{dict.addType[pickerIndex].label}}</view>
							</picker>
						</view>
						<!-- <view class="" >
							{{formData.addType == 'plus'?'增加':'减少'}}
						</view> -->
					</view>
					<view class="formBox-item">
						<view class="formBox-item-label">
							敲击一次（{{formData.title||'功德'}}）个数
						</view>
						<input @blur="numBlur" :placeholder="'输入敲击一次（'+(formData.title||'功德')+'）个数'" type="number" :value="formData.num" @input="numInput" maxlength="8" />
					</view>
					<view class="formBox-item">
						<view class="formBox-item-label">
							初始（{{formData.title||'功德'}}）个数
						</view>
						<input @blur="defaultNumBlur" :placeholder="'初始（'+(formData.title||'功德')+'）个数'" type="number" :value="formData.defaultNum" @input="defaultNumInput" />
					</view>
				</view>
				
				<view class="" style="padding-bottom: 50rpx;">
					<view style="margin-bottom: 30rpx;padding: 0 30rpx;">
						敲击声音
					</view>
					<view class="voiceBox">
						<view 
							v-for="(item,index) in renderList" 
							:key="index" 
							:class="['voice',audioName == item.audioName?'active':'']" 
							@tap="voice(item.audioName)"
						>
							{{item.text}}
						</view>
					</view>
				</view>

			</scroll-view>

		</view>
</template>

<script>
	const globalData = getApp().globalData;
	const exp = /^[0-9]*$/;
	export default {
		data() {
			return {
				audio:null,
				pickerIndex:0,
				formData:{
					title:"",
					num:1,
					defaultNum:0,
					addType:"plus" // plus / reduce
				},
				dict:{
					addType:[
						{value:'plus',label:"增加"},
						{value:'reduce',label:"减少"}
					]
				},
				renderList:[
					{
						audioName:"A",
						text:"A（哆 哆 哆）"
					},
					{
						audioName:"B",
						text:"B（duang duang duang）"
					},
					{
						audioName:"C",
						text:"C（当 当 当）"
					},
					{
						audioName:"D",
						text:"D（咚 咚 咚）"
					}
				],
				audioName: null,
				hasAddEvent:[],
				onPlay:false,
				onEnded:false,
			}
		},
		onLoad() {
			uni.getStorage({
				key:"num",
				success:(res)=> {
					this.formData.num = res.data
				},
				fail(err) {}
			})
			uni.getStorage({
				key:"title",
				success:(res)=> {
					this.formData.title = res.data
				},
				fail(err) {}
			})
			uni.getStorage({
				key:"addType",
				success:(res)=> {
					this.formData.addType = res.data
					this.dict.addType.forEach((item,index)=>{
						if(item.value == this.formData.addType){
							this.pickerIndex = index
						}
					})
				},
				fail(err) {}
			})
			uni.getStorage({
				key:"defaultNum",
				success:(res)=> {
					this.formData.defaultNum = res.data
				},
				fail(err) {}
			})
			if(this.audio){
				this.audio.stop()
				this.audio.destroy ? this.audio.destroy():""
				this.audio = null
			}
			this.audio = uni.createInnerAudioContext();
			// #ifdef MP-WEIXIN
			this.audio = wx.createInnerAudioContext({
				useWebAudioImplement:true
			});
			// #endif
			// #ifdef H5
			this.audio = new Audio()
			// #endif
			this.audioName = uni.getStorageSync("audioName");
			if (this.audioName) {
				this.audio.src = `/static/sounds/muyu_${this.audioName}.mp3`;
			} else {
				this.audioName = "A"
				// 默认木鱼声音为A
				uni.setStorage({
					key: "audioName",
					data: "A"
				})
				this.audio.src = `/static/sounds/muyu_${this.audioName}.mp3`;
			}
			// #ifdef MP-WEIXIN || APP-PLUS
			if(!this.hasAddEvent.includes("onEnded")){
				this.hasAddEvent.push("onEnded")
				this.audio.onEnded(()=>{
					this.onEndedFun()
				})
			}
			// #endif
		},
		onUnload() {
			
		},
		computed: {
			getAppData() {
				return getApp().globalData
			}
		},
		onShareAppMessage(obj) {
			return this.getAppData.shareObj
		},
		methods: {
			bindPickerChange(e){
				this.pickerIndex = e.detail.value*1
				this.formData.addType = this.dict.addType[e.detail.value].value
				uni.setStorage({
					key: "addType",
					data: this.formData.addType
				})
			},
			titleInput(e){
				this.formData.title = e.detail.value
			},
			titleInputBlur(e){
				if(e.detail.value == ""){
					this.formData.title = "功德"
				}
				uni.setStorage({
					key: "title",
					data: this.formData.title
				})
			},
			numBlur(e){
				const bool = exp.test(e.detail.value)
				if(e.detail.value === ""){
					this.formData.num = 0
					uni.setStorage({
						key: "num",
						data: this.formData.num
					})
					return
				}
				if(!bool){
					uni.showModal({
						title:"提示",
						content:"请输入数字",
						showCancel:false,
						confirmText:"好的",
						success:()=>{
							const arr = e.detail.value.split('');
							const newValue = arr.filter((item)=>exp.test(item)).join("")
							this.formData.num = BigInt(newValue).toString()
							uni.setStorage({
								key: "num",
								data: this.formData.num
							})
						}
					})
				}else{
					this.formData.num = BigInt(e.detail.value).toString()
					uni.setStorage({
						key: "num",
						data: e.detail.value
					})
				}
			},
			numInput(e){
				this.formData.num = e.detail.value
			},
			defaultNumBlur(e){
				const bool = exp.test(e.detail.value)
				if(e.detail.value === ""){
					this.formData.defaultNum = 0
					uni.setStorage({
						key: "defaultNum",
						data: this.formData.defaultNum
					})
					return
				}
				if(!bool){
					uni.showModal({
						title:"提示",
						content:"请输入数字",
						showCancel:false,
						confirmText:"好的",
						success:()=>{
							const arr = e.detail.value.split('');
							const newValue = arr.filter((item)=>exp.test(item)).join("") || 0
							this.formData.defaultNum = BigInt(newValue).toString()
							uni.setStorage({
								key: "defaultNum",
								data: this.formData.defaultNum
							})
						}
					})
				}else{
					this.formData.defaultNum = BigInt(e.detail.value).toString()
					uni.setStorage({
						key: "defaultNum",
						data: e.detail.value
					})
				}
			},
			defaultNumInput(e){
				this.formData.defaultNum = e.detail.value
			},
			onEndedFun(){
				// #ifdef APP-PLUS
				this.audio.offEnded ? this.audio.offEnded():""
				this.audio.destroy ? this.audio.destroy():""
				this.hasAddEvent = this.hasAddEvent.filter((item)=>item!=="onEnded")
				this.audio = null
				this.onEnded = true;
				// #endif
				this.onPlay = false
			},
			// 初始化audio
			initAudio(type) {
				this.audio ?	this.audio.src = `/static/sounds/muyu_${type}.mp3`:"";
				// #ifdef H5
				this.audioPlay()
				// #endif
				// #ifdef MP-WEIXIN
				if(this.onPlay){
					this.audio.seek(0)
					return
				}
				this.audio.play()
				this.onPlay = true
				// #endif
				// #ifdef APP-PLUS
				console.log(this.onEnded);
				if(this.onEnded){
					this.audio = uni.createInnerAudioContext();
					this.onEnded = false
					if(!this.hasAddEvent.includes("onEnded")){
						this.hasAddEvent.push("onEnded")
						this.audio.onEnded(()=>{
							this.onEndedFun()
						})
					}
					this.audio.src = `/static/sounds/muyu_${type}.mp3`;
					// this.audio.stop()
				}
				if(this.onPlay){
					this.audio.seek(0);
					return
				}
				this.audio.play();
				this.onPlay = true
				// #endif
			},
			audioPlay(){
				if(this.onPlay){
					this.audio.pause()
					this.audio.currentTime = 0;
					this.onPlay = false
					this.audioPlay()
					return
				}
				this.audio.play().then(()=>{
					this.onPlay = true
				}).catch(()=>{
				});
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			voice(type) {
				
				if (this.audioName != type) {
					uni.setStorage({
						key: "audioName",
						data: type
					})
					this.audioName = type
					this.onPlay = false
				}
				this.initAudio(type);
				this.$nextTick(() => {
					// this.audio.play();
					//#ifdef APP-PLUS
					plus.device.vibrate(50);
					//#endif
					//#ifdef H5
					if(globalData.device != "ios"){
						uni.vibrateShort()
					}
					//#endif
					//#ifdef MP-WEIXIN
					uni.vibrateShort()
					//#endif
				})
			},
		},
		beforeDestroy() {
			if (this.audio) {
				this.audio.offEnded?this.audio.offEnded():"";
				this.audio.destroy?this.audio.destroy():"";
				this.audio = null;
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		color: #fff;
		// #ifdef H5
		// padding-top: 40rpx;
		// #endif
		font-size: 32rpx;
		// #ifdef H5
		// padding-top: calc(var(--status-bar-height) + 60rpx);
		// #endif


		.navBar {
			display: flex;
			align-items: center;
			background-color: #000;
			// position: fixed;
			// #ifdef H5
			padding-top: calc(var(--status-bar-height) + 30rpx) !important;
			// #endif
			padding-bottom: 20rpx;
			// top: 0;
			// left: 0;
			width: 100%;
			border-bottom: 1rpx solid #444;
			// margin-bottom: 30rpx;
			.back {
				width: 20vw;
				padding-left: 30rpx;

				&:active {
					opacity: .8;
				}
			}

			.title {
				flex-grow: 1;
				text-align: center;
				padding-right: 20vw;
			}
		}
		.formBox{
			margin-bottom: 30rpx;
			.formBox-item{
				padding:30rpx 30rpx;
				margin-bottom: 20rpx;
				border-bottom: 1rpx solid #444;
				.formBox-item-label{
					margin-bottom: 20rpx;
				}
			}
		}

		.voiceBox {
			padding: 0 30rpx;

			.voice {
				border: 1rpx solid #555;
				border-radius: 8rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;
				transition: .3s;

				&.active {
					background-color: #fff;
					color: #333;
				}
			}
		}
	}
</style>
